<template>
  <div><back></back></div>
  <div class="box">
    <h2>完善资料</h2>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="username"
          label="用&emsp;户&emsp;名"
          placeholder="你的用户名"
          :rules="[{ required: true, message: '你的用户名' }]"
        />

        <van-field
          v-model="phone"
          name="phone"
          label="手&emsp;机&emsp;号"
          readonly
        />

        <van-field name="radio" label="性&emsp;&emsp;&emsp;别">
          <template #input>
            <van-radio-group v-model="checked" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
          v-model="result"
          is-link
          readonly
          name="data"
          label="出&nbsp;生&nbsp;日&nbsp;期"
          placeholder="点击选择时间"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>

        <van-field
          v-model="PS"
          name="ps"
          label="个&nbsp;性&nbsp;签&nbsp;名"
          placeholder="你的个性签名"
          :rules="[{ required: true, message: '你的个性签名' }]"
        />

        <van-field name="uploader" label="头&nbsp;像&nbsp;上&nbsp;传">
          <template #input>
            <van-uploader v-model="value" />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          保存
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { showSuccessToast, showFailToast } from "vant";
import { showConfirmDialog } from "vant";

import { ref } from "vue";
// 返回按钮
import back from "@/components/Back.vue";

// 获取用户名
const userName = localStorage.getItem("username");
const username = ref("TC_ZY");
if (userName) {
  username.value = userName;
}

const phone = ref("13100000000");
const checked = ref("2");

// 日期
const result = ref("");
const showPicker = ref(false);
const onConfirm = ({ selectedValues }) => {
  result.value = selectedValues.join("-");
  showPicker.value = false;
};

const PS = ref("购物愉快~");

const value = ref([
  { url: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" },
]);

function onSubmit(values) {
  if (values.username) {
    showConfirmDialog({
      title: "保存",
      message: "你确定要保存自己修改的信息吗?",
    })
      .then(() => {
        showSuccessToast("保存成功");
      })
      .catch(() => {});
  } else {
  }
}
</script>

<style lang="less" scoped>
.box {
  h2 {
    line-height: 1;
    font-weight: 600;
    margin-bottom: 7.133vw;
    margin-left: 5.067vw;
  }
  :deep(.van-button--round) {
    background-color: rgb(255, 60, 80);
    border-radius: 2vw;
    border: none;
    margin-top: 33vw;
  }
  :deep(.van-radio__icon--checked .van-icon) {
    background-color: rgb(255, 60, 80);
    border: none;
  }
}
</style>
